<template>
  <div class="table">
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="编号" width="80"> </el-table-column>
      <el-table-column prop="username" label="用户名" width="120"> </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="180">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" width="180"></el-table-column>
      <el-table-column prop="created" label="日期" width="180">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="props">
          <el-button link type="primary" size="small" @click="toEdit(props.row.id)">编辑</el-button>
          <el-popconfirm @confirm="deleteFlowerUserById(props.row.id)" title="确认删除？">
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getFlowerUserPage,deleteFlowerUserById} from "@/api/flowerUser";
import { ElMessage } from 'element-plus';
export default {
  name: "flowerUserListTable",
  data() {
    return {
      tableData: [],
      pages: null,
      loading: false,
      size: 10,
      currentPage: 1,
    };
  },

  methods: {
    //获取所有用户资料
    queryFlowerUserList(size, current,form=null) {
      this.loading = true;
      this.size = size;
      this.currentPage = current;
      const params = {
        size: size,
        current: current,
      };
      //将查询表与必要字段进行融合
      Object.assign(params,form);
      this.currentPage=current;
      return getFlowerUserPage(params)
          .then((response) => {
            this.tableData = response.data.data.records;
            this.pages = response.data.data.pages;
            this.loading = false;

          })
          .catch((error) => {

          });
    },

    //获取总页数
    getPages() {
      return this.pages;
    },

    //点击编辑按钮事件
    toEdit(id) {
      //向父组件传递toEdit消息并传递待编辑的id
      this.$emit('toEdit', id);
    },

    //通过id提交删除请求
    deleteFlowerUserById(id) {
      //创建一个表单
      var form = document.createElement("form");
      form.id = "form";
      form.name = "form";
      // 添加到 body 中
      document.body.appendChild(form);
      // 创建一个输入
      var input = document.createElement("input");
      // 设置相应参数
      input.type = "Number";
      input.name = "id";
      input.value =id;
      form.appendChild(input);
      return deleteFlowerUserById(form)
          .then((response) => {
            this.queryFlowerUserList(this.size, this.currentPage);
            ElMessage.success("删除成功");
          })
          .catch((error) => {
            ElMessage.error("删除失败");
          });
    },
  },
  mounted() {
    this.queryFlowerUserList(11,1);
  }
}
</script>

<style scoped>
.table {
  display: inline-block;
  margin: 1%;
}

.detailDiv {
  margin-left: 2%;
}
</style>